<template>
  <div class="home-containser">
    <el-tabs tab-position= "bottom" class="botto-tabs" type="border-card" >
      <el-tab-pane label="首页">
        <shou-ye></shou-ye>

      </el-tab-pane>
      <el-tab-pane label="订单">
        <shou-ye></shou-ye>
      </el-tab-pane>
      <el-tab-pane label="Role">客服</el-tab-pane>
      <el-tab-pane label="Task">我的</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import shouYe from '../../components/Home-ZuJian/shou-ye.vue'
export default {
  components: { shouYe },

}
</script>

<style>
/* 整个页面的容器 */
@media (max-width: 768px) {
  .home-containser{
    height: 100vh;
    width: 100%;

  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .home-containser{
    height: 100vh;
    width: 100%;
    margin: auto;
  }
}

@media (min-width:1024px){  
  .home-containser{
    height: 100vh;
    width: 30vw;
    margin:  auto; /* 居中对齐 */

  }
}


.botto-tabs{
  height: 100%;
  width: 100%;
  background-color: #f0f0f0;
  text-align:justify; 

  
}



.el-tabs__content {
  
  padding: 0px !important;
}

.home-containser .botto-tabs .el-tabs__nav {
  width: 100%;
  display: flex !important;
  justify-content: space-between; /* 两端对齐 */
}

.home-containser .botto-tabs .el-tabs__item {
  flex: 1;
  margin: 0 10px; /* 左右间隔 */
  text-align: center;
  position: relative;
}

/* 去掉首尾标签的多余间距 */
.home-containser .botto-tabs .el-tabs__item:first-child {
  margin-left: 0;
}
/* .home-containser .botto-tabs .el-tabs__item:last-child {
  margin-right: 0;
} */


.el-tabs__header.is-bottom{
  margin: 0px !important;
}
</style>